<template>
  <div class="my-box">
    <div class="mycontent">
      <div class="top">
        <h4>
          <i class="iconfont icon-shezhi"></i>
          <i class="iconfont icon-fenxiang_2"></i>
          <!-- <img src="@/assets/234.png" alt="" />
          <img src="@/assets/235.png" alt="" /> -->
        </h4>
        <h5 class="denglu">
          <img src="../assets/img/8.png" alt="" />
          <router-link to="/Login"><button>登录</button></router-link>
          <span class="xiegang">/</span>
          <router-link to="/Reg"><button>注册</button></router-link>
        </h5>
        <!-- <dt><img src="@/assets/img/touxiang222.jpg" alt="" /></dt>
        <dd>木风</dd> -->
        <ul class="mycontentul">
          <li>
            <!-- <img src="@/assets/4.svg" alt="" /> -->
            <i class="iconfont icon-qianbao"></i>
            <div>钱包</div>
          </li>
          <li>
            <!-- <img src="@/assets/4.svg" alt="" /> -->
            <i class="iconfont icon-dingdan"></i>
            <div>订单</div>
          </li>
          <li>
            <!-- <img src="@/assets/4.svg" alt="" /> -->
            <i class="iconfont icon-book"></i>
            <div>买卖的书</div>
          </li>
          <li>
            <!-- <img src="@/assets/4.svg" alt="" /> -->
            <i class="iconfont icon-lingdang"></i>
            <div>通知</div>
          </li>
        </ul>
        <p>
          <router-link to="/My/Dongtai" class="my-wenzi"
            ><span>动态</span></router-link
          >
          <router-link to="/My/Shujia" class="my-wenzi"
            ><span>书架</span></router-link
          >
        </p>
      </div>
      <div class="bottom">
        <router-view></router-view>
      </div>
    </div>
    <Footer class="myfooter" />
  </div>
</template>
<script>
import Footer from "./Footer.vue";
export default {
  name: "My",
  data() {
    return {};
  },
  components: {
    Footer,
  },
};
</script>
<style scoped>
@import url(../assets/iconfont/iconfont.css);
.xiegang{
  font-size: 30px;
}
.denglu {
  height: 2rem;
  display: flex;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.denglu img {
  background-color: #fff;
  border-radius: 50%;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.2rem;
}
.denglu button {
  background-color: #abafcc;
  border: none;
  font-size: 24px;
  width: 0.6rem;
  height: 0.5rem;
  color: #fff;
}
.my-box {
  height: 100%;
  font-size: 30px;
}
.my-box h4 .iconfont {
  color: #fff;
  float: right;
  padding-right: 0.2rem;
}
.mycontent {
  height: 100%;
}
.mycontent .icon-book {
  font-weight: lighter;
}
.top {
  background-color: #abafcc;
}
.mycontent h4 {
  height: 0.6rem;
  line-height: 0.6rem;
}
.mycontent .iconfont {
  font-size: 30px;
  font-weight: 700;
}
.mycontent dt {
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 auto;
}
.mycontent dd {
  text-align: center;
  margin: 0.05rem 0 0.2rem 0;
  color: #fff;
}
.mycontent dt img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.mycontentul {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}
.mycontentul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  padding: 0.2rem 0;
}
.mycontentul li img {
  width: 0.32rem;
  height: 0.32rem;
}
.mycontent P {
  height: 0.6rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 22px;
  color: #fff;
  border: none;
}
.mycontent .bottom {
  height: calc(100% - 3.63rem);
  background-color: #fff;
}
.myfooter {
  position: fixed;
  bottom: 0;
  left: 0;
}
.my-wenzi {
  color: #fff;
}
</style>